body,
input,
select,
button {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; /* 常见的日语字体 */
}

body {
  background-color: #f7f7f8;
}

#app {
  display: grid;
  place-items: center;
}

#title-text,
#kanji-text,
#result-text,
.normal-button {
  text-align: center; /* 文本居中对齐 */
}

#input-text,
.normal-button {
  margin: 10px auto; /* 上下间距为 10px，水平居中 */
}

#title-text,
#option-text,
#result-text,
#rate-text {
  font-size: 1.3rem; /* 适当的标题字体大小 */
}

#kanji-text {
  font-size: 2rem; /* 屏幕宽度的10% */
  margin-top: 10px; /* 顶部边距 */
}

#input-text {
  width: 22rem;
  padding: 8px;
  font-size: 1.5rem;
  border: 2px solid #bfbfbf; /* 默认边框样式 */
  outline: none; /* 去掉浏览器默认的外部边框 */
}

#input-text:focus {
  border: 2px solid #dedede; /* 获取焦点时的边框样式 */
}

.normal-button {
  padding: 8px 20px; /* 上下边距和左右边距 */
  background-color: #168bf2; /* 蓝色背景 */
  color: #fff; /* 白色文字颜色 */
  border: none; /* 去掉边框 */
  cursor: pointer; /* 鼠标指针样式 */
  font-size: 1.3rem; /* 按钮字体大小 */
  border-radius: 12px;
}

.button-container {
  display: flex;
  width: 272px;
  flex-wrap: wrap;
  gap: 8px;
}

.char-button {
  width: 48px;
  height: 48px;
  background-color: #dedede;
  color: #333333;
  font-size: 1.3rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 12px;
}

.char-button:hover {
  background-color: #d0d0d0;
}

/*
* 以下是浮层的内容
*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; /* 确保浮层在其他内容之上 */
}

.modal {
  background: #f7f7f8;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.normal-select{
  width: 20rem;
  background: #f7f7f8;
  border: 2px solid #bfbfbf; /* 默认边框样式 */
  outline: none; /* 去掉浏览器默认的外部边框 */
  padding: 8px 20px; /* 上下边距和左右边距 */
  font-size: 1.3rem; /* 适当的字体大小 */  
}

.normal-select:focus {
  border: 2px solid #dedede; /* 获取焦点时的边框样式 */
}